<script setup lang="ts">
import { computed } from "vue";

import useStore from "@src/store/store";

import FadeTransition from "@src/components/ui/transitions/FadeTransition.vue";
// import Calls from "@src/components/views/HomeView/Sidebar/Calls/Calls.vue";
// import Contacts from "@src/components/views/HomeView/Sidebar/Contacts/Contacts.vue";
import Conversations from "@src/components/views/HomeView/Sidebar/Conversations/Conversations.vue";
// import Notifications from "@src/components/views/HomeView/Sidebar/Notifications/Notifications.vue";
import Settings from "@src/components/views/HomeView/Sidebar/Settings/Settings.vue";
import EditAdmin from "@src/components/views/HomeView/Sidebar/EditAdmin/EditAdmin.vue";
import AddAdmins from "@src/components/views/HomeView/Sidebar/AddAdmin/AddAdmins.vue";
import AiSetting from "@src/components/views/HomeView/Sidebar/AiSetting/AiSetting.vue";
import ConversationsHistory from "./Conversations/ConversationsHistory.vue";
const store = useStore();

// the selected sidebar component (e.g message/notifications/settings)
const ActiveComponent = computed((): any => {
  if (store.activeSidebarComponent === "messages") {
    return Conversations;
  } else if (store.activeSidebarComponent === "settings") {
    return Settings;
  } else if (store.activeSidebarComponent === "addmembers") {
    return AddAdmins;
  } else if (store.activeSidebarComponent === "editmembers") {
    return EditAdmin;
  } else if (store.activeSidebarComponent === 'aisetting') {
    return AiSetting;
  } else if (store.activeSidebarComponent === 'history') {
    return ConversationsHistory;
  }
});
</script>

<template>
  <aside
    :class="store.activeSidebarComponent === 'aisetting' ? 'xs:w-full md:w-[490px] h-full xs:px-5 md:p-0 flex flex-col overflow-visible transition-all duration-500' : 'xs:w-full md:w-[290px] h-full xs:px-5 md:p-0 flex flex-col overflow-visible transition-all duration-500'"
  >
    <FadeTransition>
      <component :is="ActiveComponent" class="h-full flex flex-col" />
    </FadeTransition>
  </aside>
</template>
